<template>
    <div class="homePage">
        <!-- 首屏背景区 -->
        <div class="homeImg">
            <div class="homeTitle">
                <div>让花园设计变得如此简单</div>
                <div class="subtitle">设计、建模、渲染，轻松打造花园设计</div>
                <div class="custom-button">
                    <el-button @click="handleLogin" type="primary" class="custom-button-login">登陆</el-button>
                    <el-button @click="handleLogin" type="primary" class="custom-button-register">注册</el-button>
                </div>
            </div>
        </div>
        <!-- 介绍tab栏 -->
        <div class="banner">
            <div class="advantage">
                <div class="advantage-title" v-for="(item, index) in advantageList" :key="index">
                    <div>
                        <img :src="getImg(item.imgPath)" />
                    </div>
                    <div style="display: block">
                        <div class="advantage-name">{{ item.name }}</div>
                        <div class="advantage-content">{{ item.content }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 客服组件 -->
        <customerService />
        <!-- 第二部分 -->
        <div class="modelSecond">
            <modeling />
            <material />
            <pictures />
            <market />
            <major />
            <userHome />
            <enterprise />
        </div>
        <!-- <div class="modelThird"></div> -->
        <navFoot />
    </div>
</template>

<script setup>
import modeling from "./-home/modeling.vue";
import material from "./-home/material.vue";
import pictures from "./-home/pictures.vue";
import market from "./-home/market.vue";
import major from "./-home/major.vue";
import userHome from "./-home/userHome.vue";
import enterprise from "./-home/enterprise.vue";
//seo配置
useHead({
    meta: [
        {
            name: "keywords",
            content: "庭院设计软件,花园设计软件,庭院在线设计平台,花园在线设计平台,园林景观在线设计平台,庭院设计效果图,庭院",
        },
        {
            name: "description",
            content: "图布斯是设计庭院花园,阳台露台,园林景观的云软件,拥有海量庭院花园模型素材,搭积木式在线设计花园,零基础可轻松上手做出超清3D效果图,可一键渲染,全景图,小视频,导出施工图,材料预算清单",
        },
    ],
    titleTemplate: (titleChunk) => {
        return titleChunk ? `${titleChunk} - 首页` : "图布斯花园 - 首页";
    },
});
const svgModules = import.meta.glob("~/assets/svg/*.svg", { eager: true });

const getImg = (cardContent) => {
    const key = `/assets/svg/${cardContent}.svg`;
    return svgModules[key]?.default || "/fallback.svg";
};
const handleLogin = () => {};
const advantageList = ref([
    {
        name: "简单易学",
        content: "0⻔槛上⼿，1h完成花园设计",
        imgPath: "tubusi_w_index_jdyx",
    },
    {
        name: "海量素材",
        content: "⼀键拖拽，随⼼搭配",
        imgPath: "tubusi_w_index_hlsc",
    },
    {
        name: "快速渲染",
        content: "云端设计，渲染效果10秒出图",
        imgPath: "tubusi_w_index_ksxr",
    },
    {
        name: "选材⽆忧",
        content: "专业推荐，设计选材⼀站搞定",
        imgPath: "tubusi_w_index_xcwy",
    },
]);
</script>

<style lang="less" scoped>
.homePage {
    width: 100%;
    height: 1000px;
    .homeLogin {
        width: 100%;
        height: 780px;
        background: var(--grey);
    }
    .homeTitle {
        position: absolute;
        top: 240px;

        margin-left: 50%;
        transform: translateX(-50%);
        font-weight: 600;
        font-size: 52px;
        color: var(--white);
        line-height: 73px;
        .subtitle {
            margin-top: 12px;
            font-weight: 500;
            font-size: 28px;
            color: var(--white);
            line-height: 40px;
            text-align: center;
        }
    }
}
.homeImg {
    width: 100%;
    height: 780px;
    background-image: url("/assets/images/tubusi_w_index_bannerbg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.custom-button {
    min-width: 100%;
    display: flex;
    justify-content: center;

    margin-left: 50%;
    transform: translateX(-50%);
}
.custom-button-login {
    margin: 60px 10px 0 0;
    width: 180px;
    height: 56px;
    background: var(--red);
    border-radius: 8px;
    font-weight: 500;
    font-size: 20px;
    color: var(--white);
    border: 0px;
    &:hover {
        background-color: var(--red);
        border: 0px;
    }
}
.custom-button-register {
    margin: 60px 0 0 10px;
    width: 180px;
    height: 56px;
    background: var(--opaque);
    border-radius: 8px;
    font-weight: 500;
    font-size: 20px;
    color: var(--white);
    border: 1px solid var(--white);

    &:hover {
        background-color: var(--opaque);
        border: 1px solid var(--white);
    }
}
.banner {
    position: absolute;
    top: 720px;
    width: 100%;
}
.advantage {
    width: 1380px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    .advantage-title {
        width: 315px;
        height: 120px;
        background: var(--backOpaque);
        box-shadow: 0px 10px 20px 0px var(--shadow);
        border-radius: 24px;
        border: 1px solid var(--borderGrey);
        backdrop-filter: blur(6px);
        margin: 0 15px;
        display: flex;
        img {
            width: 60px;
            height: 60px;
            margin: 30px 20px 30px 28px;
        }
        .advantage-name {
            margin-top: 33px;
            font-weight: 500;
            font-size: 20px;
            color: var(--black);
            line-height: 24px;
        }
        .advantage-content {
            margin-top: 9px;
            font-weight: 400;
            font-size: 14px;
            color: var(--black);
            line-height: 20px;
        }
    }
}

.modelSecond {
    width: 1380px;
    margin: 0 auto;
    // height: 896px;
    background: var(--white);
    padding-top: 60px;
}
.modelThird {
    width: 100%;
    height: 896px;
    background: var(--bjBlack);
}
</style>
